<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body>
	<div class="layui-fluid">
		<table id="menu-table" lay-filter="menu-table"></table>
	</div>
	<!-- 工具栏 -->
	<script type="text/html" id="toolbarMenu">
        <div class="layui-btn-container">
			<button class="layui-btn layui-btn-sm" lay-event="expand"><i class="layui-icon layui-icon-add-1" ></i>全部展开</button>
			<button class="layui-btn layui-btn-sm" lay-event="fold">-- 全部折叠</button>
        </div>
    </script>
	<!-- 操作列 -->
	<script type="text/html" id="menu-state">
     <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>生成菜单</button>
    </div>
    </script>
	<div th:include="include::footer"></div>
	<script>
		layui.config({
			base : '/sys/'
		}).extend({
			treetable : '/js/treetable'
		}).use([ 'table', 'treetable' ], function() {
			var $ = layui.jquery;
			var table = layui.table;
			var treetable = layui.treetable;
			// 渲染表格
			var renderTable = function() {
				layer.load(2);
				treetable.render({
					treeColIndex : 1,
					treeDefaultClose : true,
					treeSpid : 0,
					toolbar : '#toolbarMenu',
					treeIdName : 'menuId',
					treePidName : 'parentId',
					elem : '#menu-table',
					url : '/sys/menu/admin/list',
					page : false,
					cols : [ [ {
						type : 'numbers',
						title : '序号'
					}, {
						field : 'name',
						title : '菜单名称'
					}, {
						field : 'perms',
						title : '权限标识'
					}, {
						field : 'url',
						title : '菜单url'
					}, {
						field : 'icon',
						align : 'center',
						title : '图标',
						templet : function(d) {
							return '<span class="'+d.icon+'"></span>';
						}
					}, {
						field : 'type',
						align : 'center',
						templet : function(d) {
							if (d.type == 1) {
								return '<span class="layui-badge layui-bg-green">菜单</span>';
							} else if (d.type == 2) {
								return '<span class="layui-badge layui-bg-gray">按钮</span>';
							} else if (d.type == 0) {
								return '<span class="layui-badge layui-bg-blue">目录</span>';
							}
						},
						title : '类型'
					}, {
						templet : function(d) {
							if (d.type == 1) {
								return $('#menu-state').text();
							}
							return '<span class="layui-badge layui-bg-gray"><i class="layui-icon layui-icon-add-1"></i>按钮</span>';
						},
						align : 'center',
						title : '操作'
					} ] ],
					done : function() {
						layer.closeAll('loading');
					}
				});
			};
			renderTable();
			//头工具栏事件
			table.on('toolbar(menu-table)', function(obj) {
				switch (obj.event) {
				case 'expand': //展开
					treetable.expandAll('#menu-table');
					break;
				case 'fold'://折叠
					treetable.foldAll('#menu-table');
					break;
				}
			});

			//监听工具条
			table.on('tool(menu-table)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				if (layEvent === 'add') {//生成
					adminAdd(data.menuId);
				}
			});

			function adminAdd(id) {
				layer.open({
					type : 2,
					title : 'Admin生成菜单',
					maxmin : true,
					shadeClose : false, // 点击遮罩关闭层
					area : [ '60%', '75%' ],
					content : '/sys/menu/adminAdd/' + id // iframe的url
				});
			}

		});
	</script>
</body>
</html>